<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-10-17 16:29:16
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-11-20 17:43:17
 * @Description: 订单详情
 * @FilePath: \charging-mini\充电项目\pages\order_detail.vue
-->
<template>
    <div class="container" :style="{ backgroundImage: `url(${imgs.orderDetailBg})` }">
        <HeaderBar>
            <template slot="titleBar">
                <div class="container-title">
                    <img v-if="isWx" class="back" :src="imgs.back" alt="" @click="back" />
                    <span>订单详情</span>
                </div>
            </template>
        </HeaderBar>
        <div class="info-card">
            <img class="car" :src="imgs.car" alt="" />
            <div class="info-title">
                <img :src="imgs.stationIcon" alt="" />
                <span>{{ info.stationName || "充电桩" }}</span>
            </div>
            <div class="info-item">
                <div class="label">订单编号</div>
                <div class="value">
                    <span>{{ info.orderNo }}</span>
                    <img class="copy" :src="imgs.copyIcon" alt="" @click="copy(info.orderNo)" />
                </div>
            </div>
            <div class="info-item">
                <div class="label">订单状态</div>
                <div class="value">
                    <StatusTag :status="info.chargingStatus" />
                </div>
            </div>
            <div class="info-item">
                <div class="label">收费类型</div>
                <div class="value">
                    <span>{{ info.chargeTypeDesc }}</span>
                </div>
            </div>
            <div class="info-item">
                <div class="label">充电开始时间</div>
                <div class="value">
                    <span>{{ info.startTime }}</span>
                </div>
            </div>
            <div class="info-item">
                <div class="label">充电结束时间</div>
                <div class="value">
                    <span>{{ info.endTime }}</span>
                </div>
            </div>
            <div class="info-item">
                <div class="label">充电口</div>
                <div class="value">
                    <span>{{ info.port }}号口</span>
                </div>
            </div>
            <div class="info-item">
                <div class="label">充电时长</div>
                <div class="value">
                    <span>{{ formatChargingTime(info.chargingTime) }}</span>
                </div>
            </div>
            <div class="info-item">
                <div class="label">充电方式</div>
                <div class="value">
                    <span>{{ info.scanCharge ? "扫码充电" : "实体卡" }}</span>
                </div>
            </div>
            <div class="divider"></div>
            <div class="info-item">
                <div class="label" style="color: #333">支付金额</div>
                <div class="value">
                    <span class="pay-amount">{{ info.payAmount || info.payAmount === 0 ? (info.payAmount / 100).toFixed(2) : "-" }}</span
                    >元
                </div>
            </div>
        </div>

        <div class="btns">
            <div class="feedback" @click="invoice">去开发票</div>
            <div class="feedback" @click="feedback">反馈建议</div>
            <!-- <div v-if="info.chargingStatus === 'CHARGING'" class="terminate" @click="terminate">终止充电</div> -->
        </div>
    </div>
</template>
<script>
import moment from "moment";
import HeaderBar from "../src/components/HeaderBar.vue";
import StatusTag from "../src/components/StatusTag.vue";
import { formatChargingTime } from "../src/libs/utils";
import { getOrderDetailAPI, terminateChargeAPI } from "../src/api/api";

const app = getApp();

export default {
    components: {
        HeaderBar,
        StatusTag,
    },
    data() {
        return {
            moment,
            isWx: app.globalData.isWx,
            imgs: app.globalData.imgs,
            info: {},
            orderNo: "",
        };
    },
    onShareAppMessage() {},
    onLoad(options) {
        this.orderNo = options.orderNo;
        this.getInfo();
    },
    methods: {
        formatChargingTime,
        back() {
            uni.navigateBack();
        },
        getInfo() {
            getOrderDetailAPI({ orderNo: this.orderNo }).then((res) => {
                this.info = res || {};
            });
        },
        // 复制订单号
        copy(text) {
            uni.setClipboardData({
                data: text,
                success: () => {
                    uni.showToast({
                        title: "复制订单号成功",
                        icon: "none",
                        duration: 1500,
                    });
                },
            });
        },
        // 去开发票
        invoice() {
            uni.navigateTo({
                url: `/pages/invoice_list`,
            });
        },
        // 建议反馈
        feedback() {
            uni.navigateTo({
                url: `/pages/feedback?charge_order_no=${this.info.orderNo}&device_serial_num=${this.info.deviceSerialNum}`,
            });
        },
        // 停止充电
        terminate() {
            terminateChargeAPI({ orderNo: this.orderNo }).then((res) => {
                uni.showToast({
                    title: "终止充电",
                    icon: "none",
                    duration: 1500,
                });
                this.getInfo();
            });
        },
    },
};
</script>
<style lang="less" scoped>
.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    background-color: #f6f6f6;
    .container-title {
        display: flex;
        align-items: center;
        font-size: 38rpx;
        line-height: 1;
        font-weight: bold;
        color: #333;
        .back {
            width: 32rpx;
            height: 32rpx;
            margin-left: 28rpx;
            margin-right: 28rpx;
            display: block;
        }
    }

    .info-card {
        position: relative;
        margin-top: 180rpx;
        width: 697rpx;
        padding: 28rpx;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 24rpx;
        display: flex;
        flex-direction: column;
        .car {
            position: absolute;
            width: 220rpx;
            height: 180rpx;
            top: -140rpx;
            right: 20rpx;
        }
        .info-title {
            font-size: 28rpx;
            line-height: 1;
            color: #333;
            display: flex;
            align-items: center;
            margin-bottom: 28rpx;
            font-weight: bold;
            img {
                flex: none;
                width: 36rpx;
                height: 36rpx;
                margin-right: 20rpx;
            }
        }
        .divider {
            width: 100%;
            border-bottom: 2rpx solid #f3f3f3;
            margin-bottom: 28rpx;
        }
        .info-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 26rpx;
            line-height: 34rpx;
            color: #9a9a9a;
            margin-bottom: 28rpx;
            &:last-child {
                margin-bottom: 0;
            }
            .value {
                display: flex;
                align-items: center;
                color: #333;
                .pay-amount {
                    font-size: 32rpx;
                    line-height: 40rpx;
                    font-weight: bold;
                    margin-right: 10rpx;
                    color: #ff5e5e;
                }
            }
            .copy {
                width: 28rpx;
                height: 28rpx;
                margin-left: 10rpx;
            }
        }
    }
    .btns {
        width: 100%;
        margin-top: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .feedback {
            width: 330rpx;
            height: 84rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            color: #9a9a9a;
            border-radius: 42rpx;
            margin: 0 16rpx;
            font-size: 28rpx;
        }
        .terminate {
            width: 330rpx;
            height: 84rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ff5e5e;
            color: #fff;
            border-radius: 42rpx;
            margin: 0 16rpx;
            font-size: 28rpx;
        }
    }
}
</style>
